{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Explore Dataframe\n",
    "1. 指定Dataframe中的1-3个列,可以自动生成预设的交互式图像\n",
    "2. 可处理数值型和字符串型的列"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1.绘图模块"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.1 处理1列的绘图模块"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "'''\n",
    "    处理1列数据的绘图模块\n",
    "        1.绘图函数后加_layout为相应的风格设置函数\n",
    "'''\n",
    "import plotly.graph_objs as go\n",
    "\n",
    "# 对一列数据绘制histogram\n",
    "def column_histogram(df,col):\n",
    "    x=list(df[col])\n",
    "    trace=go.Histogram(x=x)\n",
    "    return trace\n",
    "\n",
    "def column_histogram_layout(col):\n",
    "    layout = go.Layout(\n",
    "        title=col,\n",
    "        xaxis=dict(\n",
    "            title='Value'\n",
    "        ),\n",
    "        yaxis=dict(\n",
    "            title='Count'\n",
    "        ),\n",
    "    )\n",
    "    return layout\n",
    "\n",
    "# 对一列数据绘制pie\n",
    "def column_pie(df,colname):\n",
    "    tmp=df[colname].value_counts()\n",
    "    labels=tmp.index\n",
    "    values=tmp.values\n",
    "    pie=go.Pie(labels=labels, values=values,\n",
    "                    hoverinfo='label+percent', textinfo='value',\n",
    "                    textfont=dict(size=20),\n",
    "                    hole=.4,text=[colname],textposition='inside'\n",
    "                )\n",
    "    return pie\n",
    "\n",
    "# 对一列数据绘制bar\n",
    "def column_bar(df,col):\n",
    "    x=df.columns.unique()\n",
    "    y=[len(df[df[col]==lb]) for lb in x]\n",
    "    trace=go.Bar(\n",
    "            x=x,\n",
    "            y=y\n",
    "    )\n",
    "    return trace\n",
    "\n",
    "def column_bar_layout(col):\n",
    "    layout = go.Layout(\n",
    "        title=col,\n",
    "        xaxis=dict(\n",
    "            title='Value'\n",
    "        ),\n",
    "        yaxis=dict(\n",
    "            title='Count'\n",
    "        ),\n",
    "    )\n",
    "    return layout"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.2 处理2列的绘图模块\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "'''\n",
    "    处理2列数据的绘图模块\n",
    "        1.绘图函数后加_layout为相应的风格设置函数\n",
    "'''\n",
    "import plotly.graph_objs as go\n",
    "\n",
    "# 两列都为字符串,绘制bubble图\n",
    "def str_str_bubble(df,col1, col2):\n",
    "    col1_labels=df[col1].unique()\n",
    "    col2_labels=df[col2].unique()\n",
    "    col2_len=len(col2_labels)\n",
    "    x=[]\n",
    "    #统计各点个数以决定bubble大小\n",
    "    for lb in col1_labels:\n",
    "        x+=[lb]*col2_len\n",
    "    y=list(col2_labels)*len(col1_labels)\n",
    "    x1,y1,size=[],[],[]\n",
    "    #所有x,y相同位置的值对包括了所有可能的标签组合\n",
    "    for a,b in zip(x,y):\n",
    "        num=len(df[(df[col1]==a)&(df[col2]==b)])#该标签组合的数目\n",
    "        if(num>0):\n",
    "            x1.append(a)\n",
    "            y1.append(b)\n",
    "            size.append(num)\n",
    "    trace = go.Scatter(\n",
    "        x=x1,\n",
    "        y=y1,\n",
    "        mode='markers',\n",
    "        marker=dict(\n",
    "            size=size,\n",
    "            sizemode='area',\n",
    "            sizeref=2.*max(size)/(40.**2),\n",
    "            sizemin=4\n",
    "        )\n",
    "    )\n",
    "    return trace\n",
    "\n",
    "def str_str_bubble_layout(col1,col2):\n",
    "    title=','.join([col1,col2])\n",
    "    layout=go.Layout(\n",
    "                    title=title,\n",
    "                    xaxis=dict(\n",
    "                        title=col1\n",
    "                    ),\n",
    "                    yaxis=dict(\n",
    "                        title=col2\n",
    "                    ),\n",
    "                )\n",
    "    return layout\n",
    "\n",
    "# 对两列数据绘制scatter\n",
    "def two_column_scatter(df,col1,col2):\n",
    "    x,y=df[col1],df[col2]\n",
    "    trace = go.Scatter(\n",
    "        x=x,\n",
    "        y=y,\n",
    "        mode='markers'\n",
    "    )\n",
    "    return trace\n",
    "\n",
    "def two_column_scatter_layout(col1,col2):\n",
    "    title=','.join([col1,col2])\n",
    "    layout=go.Layout(\n",
    "                    title=title,\n",
    "                    xaxis=dict(\n",
    "                        title=col1\n",
    "                    ),\n",
    "                    yaxis=dict(\n",
    "                        title=col2\n",
    "                    ),\n",
    "                )\n",
    "    return layout\n",
    "\n",
    "# x轴为字符串,y轴为数值,绘制bubble\n",
    "def str_num_bubble(df,str_col1, num_col2):\n",
    "    col1_labels=df[str_col1].unique()\n",
    "    col2_labels=df[num_col2].unique()\n",
    "    col2_len=len(col2_labels)\n",
    "    x=[]\n",
    "    #统计各点个数以决定bubble大小\n",
    "    for lb in col1_labels:\n",
    "        x+=[lb]*col2_len\n",
    "    y=list(col2_labels)*len(col1_labels)\n",
    "    x1,y1,size=[],[],[]\n",
    "    #所有x,y相同位置的值对包括了所有可能的标签组合\n",
    "    for a,b in zip(x,y):\n",
    "        num=len(df[(df[str_col1]==a)&(df[num_col2]==b)])#该标签组合的数目\n",
    "        if(num>0):\n",
    "            x1.append(a)\n",
    "            y1.append(b)\n",
    "            size.append(num)\n",
    "    trace = go.Scatter(\n",
    "        x=x1,\n",
    "        y=y1,\n",
    "        mode='markers',\n",
    "        marker=dict(\n",
    "            size=size,\n",
    "            sizemode='area',\n",
    "            sizeref=2.*max(size)/(40.**2),\n",
    "            sizemin=4\n",
    "        )\n",
    "    )\n",
    "    return trace\n",
    "\n",
    "def str_num_bubble_layout(col1,col2):\n",
    "    title=','.join([col1,col2])\n",
    "    layout=go.Layout(\n",
    "                    title=title,\n",
    "                    xaxis=dict(\n",
    "                        title=col1\n",
    "                    ),\n",
    "                    yaxis=dict(\n",
    "                        title=col2\n",
    "                    ),\n",
    "                )\n",
    "    return layout\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.3处理3列的绘图模块"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "'''\n",
    "    处理3列数据的绘图模块\n",
    "        1.绘图函数后加_layout为相应的风格设置函数\n",
    "'''\n",
    "import plotly.graph_objs as go\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "from pandas.api.types import is_string_dtype\n",
    "\n",
    "# 第三列为数值,绘制3d-scatter\n",
    "def three_dim_scatter_z_num(df,col1, col2, col3):\n",
    "    z = df[col3]\n",
    "    if(is_string_dtype(z)):\n",
    "        z=pd.factorize(z)[0].astype(np.uint16)\n",
    "    trace = go.Scatter3d(\n",
    "        x=df[col1], y=df[col2], z=df[col3],\n",
    "        mode='markers', marker={'size': 8, 'color': z, 'colorscale': 'Blackbody', 'opacity': 0.8, \"showscale\": True,\n",
    "                                \"colorbar\": {\"thickness\": 15, \"len\": 0.5, \"x\": 0.8, \"y\": 0.6, }, })\n",
    "    return trace\n",
    "\n",
    "# 3d-scatter外观\n",
    "def three_dim_scatter_layout(col1,col2,col3):\n",
    "    title=','.join([col1,col2,col3])\n",
    "    layout=go.Layout(\n",
    "                height=700, title=title,\n",
    "                paper_bgcolor=\"#f3f3f3\",\n",
    "                scene={\"aspectmode\": \"cube\", \"xaxis\": {\"title\":col1, },\n",
    "                       \"yaxis\": {\"title\": col2, },\n",
    "                       \"zaxis\": {\"title\": col3, }})\n",
    "    return layout\n",
    "\n",
    "# 第三列为字符串,绘制3d-scatter\n",
    "def three_dim_scatter_z_str(df,col1, col2, col3):\n",
    "    z = pd.factorize(df[col3])[0].astype(np.uint16)\n",
    "    trace = go.Scatter3d(\n",
    "        x=df[col1], y=df[col2], z=df[col3],\n",
    "        mode='markers', marker={'size': 8, 'color': z, 'colorscale': 'Blackbody', 'opacity': 0.8, \"showscale\": False,\n",
    "                                \"colorbar\": {\"thickness\": 15, \"len\": 0.5, \"x\": 0.8, \"y\": 0.6, }, })\n",
    "    return trace"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2.交互控制逻辑"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.1 使用说明\n",
    "1. 传入无缺失值的dataframe\n",
    "2. 在下拉栏中选中想绘图的列即可"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.2 交互控制代码"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "'''third party packages'''\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "import plotly.graph_objs as go\n",
    "from dash.dependencies import Input, Output\n",
    "from pandas.api.types import is_string_dtype\n",
    "from pandas.api.types import is_numeric_dtype\n",
    "import pandas as pd\n",
    "\n",
    "\n",
    "# '''my modules,'''\n",
    "# from myplot1c import * #包含了绘图相关的函数,几c对应处理输入几列的绘图\n",
    "# from myplot2c import *\n",
    "# from myplot3c import *\n",
    "\n",
    "'''demo data'''\n",
    "df = pd.read_csv(\n",
    "    'https://gist.githubusercontent.com/chriddyp/' +\n",
    "    '5d1ea79569ed194d432e56108a04d188/raw/' +\n",
    "    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+\n",
    "    'gdp-life-exp-2007.csv')\n",
    "# df =pd.read_csv('./mushrooms.csv')\n",
    "# df =pd.read_csv('./iris.csv')\n",
    "\n",
    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
    "\n",
    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
    "\n",
    "# 背景\n",
    "empty_figure={\n",
    "            'data': [\n",
    "            ],\n",
    "            'layout': {\n",
    "                'title':'Empty figure'\n",
    "            }\n",
    "}\n",
    "\n",
    "# app的整体布局\n",
    "app.layout = html.Div([\n",
    "    html.Div([html.H1(\"Explore Dataframe\")],\n",
    "                 style={'textAlign': \"center\", \"padding-bottom\": \"10\", \"padding-top\": \"10\"}),\n",
    "    dcc.Graph(\n",
    "        id='main-graph',\n",
    "        figure=empty_figure\n",
    "    ),\n",
    "    dcc.Dropdown(\n",
    "    id='columns-dropdown',\n",
    "    options=[\n",
    "        {'label':lb, 'value':lb} for lb in df.columns\n",
    "    ],\n",
    "    multi=True,\n",
    "    ),\n",
    "])\n",
    "\n",
    "# 设置选择列的功能\n",
    "@app.callback(\n",
    "Output('main-graph', 'figure'),\n",
    "[Input('columns-dropdown', 'value')])\n",
    "def show(columnsValue):\n",
    "    is_str=is_string_dtype\n",
    "    is_num=is_numeric_dtype\n",
    "    if columnsValue is not None:\n",
    "        if(len(columnsValue)==0):\n",
    "            return empty_figure\n",
    "        elif (len(columnsValue)==1):\n",
    "            col1=columnsValue[0]\n",
    "            if(is_str(df[col1])):#该列为字符串型,生成pie图,(为用字符或单词表示类型的列设计)\n",
    "                return {'data':[column_pie(df,columnsValue[0])],'layout':{'title':col1}}\n",
    "            if(is_num(df[col1])):#数值列,生成histogram\n",
    "                return {'data': [column_histogram(df,columnsValue[0])],'layout':column_histogram_layout(col1)}\n",
    "        elif(len(columnsValue)==2):\n",
    "            col1,col2=columnsValue[0],columnsValue[1]\n",
    "            if (is_str(df[col1]) and is_str(df[col2])):#两列都是字符型,生成bubble图\n",
    "                return {'data':[str_str_bubble(df,col1, col2)],'layout':str_str_bubble_layout(col1,col2)}\n",
    "            elif(is_str(df[col1]) and is_num(df[col2])):#字符和数值,以字符为横轴生成bubble,\n",
    "                return {'data': [str_num_bubble(df,col1, col2)],'layout':str_num_bubble_layout(col1,col2)}\n",
    "            elif(is_num(df[col1]) and is_str(df[col2])):\n",
    "                return {'data': [str_num_bubble(df,col2, col1)],'layout':str_num_bubble_layout(col2,col1)}\n",
    "            elif(is_num(df[col1]) and is_num(df[col2])):#都是数值,生成scatter图\n",
    "                return {'data':[two_column_scatter(df,col1,col2)],'layout':two_column_scatter_layout(col1,col2)}\n",
    "        elif(len(columnsValue)==3):#3列,生成3d-scatter图\n",
    "            col1, col2,col3 = columnsValue[0], columnsValue[1],columnsValue[2]\n",
    "            if(is_num(df[col3])):\n",
    "                return {'data': [three_dim_scatter_z_num(df,col1, col2, col3)], 'layout':three_dim_scatter_layout(col1, col2, col3)}\n",
    "            elif(is_str(df[col3])):\n",
    "                return {'data': [three_dim_scatter_z_str(df,col1, col2, col3)],\n",
    "                        'layout': three_dim_scatter_layout(col1, col2, col3)}\n",
    "        else:\n",
    "            return empty_figure\n",
    "    else:\n",
    "        return empty_figure\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 3.notebook兼容性"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 3.1说明\n",
    "1. 不原生支持notebook,是利用ipython的展示功能,使用iframe展示的镜像,源页面在localhost上\n",
    "2. 功能依赖于dash程序使用的server,server没在运行时功能失效"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 3.2兼容性代码"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "# -*- coding: utf-8 -*-\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from IPython import display\n",
    "\n",
    "def show_app(app,  # type: dash.Dash\n",
    "             port=9999,\n",
    "             width=700,\n",
    "             height=350,\n",
    "             offline=True,\n",
    "             style=True,\n",
    "             **dash_flask_kwargs):\n",
    "    \"\"\"\n",
    "    Run the application inside a Jupyter notebook and show an iframe with it\n",
    "    :param app:\n",
    "    :param port:\n",
    "    :param width:\n",
    "    :param height:\n",
    "    :param offline:\n",
    "    :return:\n",
    "    \"\"\"\n",
    "    url = 'http://localhost:%d' % port\n",
    "    iframe = '<iframe src=\"{url}\" width={width} height={height}></iframe>'.format(url=url,\n",
    "                                                                                  width=width,\n",
    "                                                                                  height=height)\n",
    "    display.display_html(iframe, raw=True)\n",
    "    if offline:\n",
    "        app.css.config.serve_locally = True\n",
    "        app.scripts.config.serve_locally = True\n",
    "    if style:\n",
    "        external_css = [\"https://fonts.googleapis.com/css?family=Raleway:400,300,600\",\n",
    "                        \"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\",\n",
    "                        \"http://getbootstrap.com/dist/css/bootstrap.min.css\", ]\n",
    "\n",
    "        for css in external_css:\n",
    "            app.css.append_css({\"external_url\": css})\n",
    "\n",
    "        external_js = [\"https://code.jquery.com/jquery-3.2.1.min.js\",\n",
    "                       \"https://cdn.rawgit.com/plotly/dash-app-stylesheets/a3401de132a6d0b652ba11548736b1d1e80aa10d/dash-goldman-sachs-report-js.js\",\n",
    "                       \"http://getbootstrap.com/dist/js/bootstrap.min.js\"]\n",
    "\n",
    "        for js in external_js:\n",
    "            app.scripts.append_script({\"external_url\": js})\n",
    "\n",
    "    return app.run_server(debug=False,  # needs to be false in Jupyter\n",
    "                          port=port,\n",
    "                          **dash_flask_kwargs)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 4.运行"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 4.1数据展示"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "df1=pd.read_csv('./mushrooms.csv')\n",
    "df2=pd.read_csv('./iris.csv')\n",
    "df3 = pd.read_csv(\n",
    "    'https://gist.githubusercontent.com/chriddyp/' +\n",
    "    '5d1ea79569ed194d432e56108a04d188/raw/' +\n",
    "    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+\n",
    "    'gdp-life-exp-2007.csv')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 4.1.1 mushrooms.csv"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "##### 说明:第一个字段class为蘑菇是否有毒,其余均为字符表示的蘑菇的某种特征"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>class</th>\n",
       "      <th>cap-shape</th>\n",
       "      <th>cap-surface</th>\n",
       "      <th>cap-color</th>\n",
       "      <th>bruises</th>\n",
       "      <th>odor</th>\n",
       "      <th>gill-attachment</th>\n",
       "      <th>gill-spacing</th>\n",
       "      <th>gill-size</th>\n",
       "      <th>gill-color</th>\n",
       "      <th>...</th>\n",
       "      <th>stalk-surface-below-ring</th>\n",
       "      <th>stalk-color-above-ring</th>\n",
       "      <th>stalk-color-below-ring</th>\n",
       "      <th>veil-type</th>\n",
       "      <th>veil-color</th>\n",
       "      <th>ring-number</th>\n",
       "      <th>ring-type</th>\n",
       "      <th>spore-print-color</th>\n",
       "      <th>population</th>\n",
       "      <th>habitat</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>p</td>\n",
       "      <td>x</td>\n",
       "      <td>s</td>\n",
       "      <td>n</td>\n",
       "      <td>t</td>\n",
       "      <td>p</td>\n",
       "      <td>f</td>\n",
       "      <td>c</td>\n",
       "      <td>n</td>\n",
       "      <td>k</td>\n",
       "      <td>...</td>\n",
       "      <td>s</td>\n",
       "      <td>w</td>\n",
       "      <td>w</td>\n",
       "      <td>p</td>\n",
       "      <td>w</td>\n",
       "      <td>o</td>\n",
       "      <td>p</td>\n",
       "      <td>k</td>\n",
       "      <td>s</td>\n",
       "      <td>u</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>e</td>\n",
       "      <td>x</td>\n",
       "      <td>s</td>\n",
       "      <td>y</td>\n",
       "      <td>t</td>\n",
       "      <td>a</td>\n",
       "      <td>f</td>\n",
       "      <td>c</td>\n",
       "      <td>b</td>\n",
       "      <td>k</td>\n",
       "      <td>...</td>\n",
       "      <td>s</td>\n",
       "      <td>w</td>\n",
       "      <td>w</td>\n",
       "      <td>p</td>\n",
       "      <td>w</td>\n",
       "      <td>o</td>\n",
       "      <td>p</td>\n",
       "      <td>n</td>\n",
       "      <td>n</td>\n",
       "      <td>g</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>e</td>\n",
       "      <td>b</td>\n",
       "      <td>s</td>\n",
       "      <td>w</td>\n",
       "      <td>t</td>\n",
       "      <td>l</td>\n",
       "      <td>f</td>\n",
       "      <td>c</td>\n",
       "      <td>b</td>\n",
       "      <td>n</td>\n",
       "      <td>...</td>\n",
       "      <td>s</td>\n",
       "      <td>w</td>\n",
       "      <td>w</td>\n",
       "      <td>p</td>\n",
       "      <td>w</td>\n",
       "      <td>o</td>\n",
       "      <td>p</td>\n",
       "      <td>n</td>\n",
       "      <td>n</td>\n",
       "      <td>m</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>p</td>\n",
       "      <td>x</td>\n",
       "      <td>y</td>\n",
       "      <td>w</td>\n",
       "      <td>t</td>\n",
       "      <td>p</td>\n",
       "      <td>f</td>\n",
       "      <td>c</td>\n",
       "      <td>n</td>\n",
       "      <td>n</td>\n",
       "      <td>...</td>\n",
       "      <td>s</td>\n",
       "      <td>w</td>\n",
       "      <td>w</td>\n",
       "      <td>p</td>\n",
       "      <td>w</td>\n",
       "      <td>o</td>\n",
       "      <td>p</td>\n",
       "      <td>k</td>\n",
       "      <td>s</td>\n",
       "      <td>u</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>e</td>\n",
       "      <td>x</td>\n",
       "      <td>s</td>\n",
       "      <td>g</td>\n",
       "      <td>f</td>\n",
       "      <td>n</td>\n",
       "      <td>f</td>\n",
       "      <td>w</td>\n",
       "      <td>b</td>\n",
       "      <td>k</td>\n",
       "      <td>...</td>\n",
       "      <td>s</td>\n",
       "      <td>w</td>\n",
       "      <td>w</td>\n",
       "      <td>p</td>\n",
       "      <td>w</td>\n",
       "      <td>o</td>\n",
       "      <td>e</td>\n",
       "      <td>n</td>\n",
       "      <td>a</td>\n",
       "      <td>g</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>5 rows × 23 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "  class cap-shape cap-surface cap-color bruises odor gill-attachment  \\\n",
       "0     p         x           s         n       t    p               f   \n",
       "1     e         x           s         y       t    a               f   \n",
       "2     e         b           s         w       t    l               f   \n",
       "3     p         x           y         w       t    p               f   \n",
       "4     e         x           s         g       f    n               f   \n",
       "\n",
       "  gill-spacing gill-size gill-color  ... stalk-surface-below-ring  \\\n",
       "0            c         n          k  ...                        s   \n",
       "1            c         b          k  ...                        s   \n",
       "2            c         b          n  ...                        s   \n",
       "3            c         n          n  ...                        s   \n",
       "4            w         b          k  ...                        s   \n",
       "\n",
       "  stalk-color-above-ring stalk-color-below-ring veil-type veil-color  \\\n",
       "0                      w                      w         p          w   \n",
       "1                      w                      w         p          w   \n",
       "2                      w                      w         p          w   \n",
       "3                      w                      w         p          w   \n",
       "4                      w                      w         p          w   \n",
       "\n",
       "  ring-number ring-type spore-print-color population habitat  \n",
       "0           o         p                 k          s       u  \n",
       "1           o         p                 n          n       g  \n",
       "2           o         p                 n          n       m  \n",
       "3           o         p                 k          s       u  \n",
       "4           o         e                 n          a       g  \n",
       "\n",
       "[5 rows x 23 columns]"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df1.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 4.1.2 iris.csv"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Unnamed: 0</th>\n",
       "      <th>Sepal.Length</th>\n",
       "      <th>Sepal.Width</th>\n",
       "      <th>Petal.Length</th>\n",
       "      <th>Petal.Width</th>\n",
       "      <th>Species</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>1</td>\n",
       "      <td>5.1</td>\n",
       "      <td>3.5</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>2</td>\n",
       "      <td>4.9</td>\n",
       "      <td>3.0</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>3</td>\n",
       "      <td>4.7</td>\n",
       "      <td>3.2</td>\n",
       "      <td>1.3</td>\n",
       "      <td>0.2</td>\n",
       "      <td>setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>4</td>\n",
       "      <td>4.6</td>\n",
       "      <td>3.1</td>\n",
       "      <td>1.5</td>\n",
       "      <td>0.2</td>\n",
       "      <td>setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>5</td>\n",
       "      <td>5.0</td>\n",
       "      <td>3.6</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>setosa</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "   Unnamed: 0  Sepal.Length  Sepal.Width  Petal.Length  Petal.Width Species\n",
       "0           1           5.1          3.5           1.4          0.2  setosa\n",
       "1           2           4.9          3.0           1.4          0.2  setosa\n",
       "2           3           4.7          3.2           1.3          0.2  setosa\n",
       "3           4           4.6          3.1           1.5          0.2  setosa\n",
       "4           5           5.0          3.6           1.4          0.2  setosa"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df2.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 4.1.3 gdp-life-exp-2007.csv"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "##### 说明:第一列为编号,无实际意义"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Unnamed: 0</th>\n",
       "      <th>country</th>\n",
       "      <th>continent</th>\n",
       "      <th>population</th>\n",
       "      <th>life expectancy</th>\n",
       "      <th>gdp per capita</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>11</td>\n",
       "      <td>Afghanistan</td>\n",
       "      <td>Asia</td>\n",
       "      <td>31889923.0</td>\n",
       "      <td>43.828</td>\n",
       "      <td>974.580338</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>23</td>\n",
       "      <td>Albania</td>\n",
       "      <td>Europe</td>\n",
       "      <td>3600523.0</td>\n",
       "      <td>76.423</td>\n",
       "      <td>5937.029526</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>35</td>\n",
       "      <td>Algeria</td>\n",
       "      <td>Africa</td>\n",
       "      <td>33333216.0</td>\n",
       "      <td>72.301</td>\n",
       "      <td>6223.367465</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>47</td>\n",
       "      <td>Angola</td>\n",
       "      <td>Africa</td>\n",
       "      <td>12420476.0</td>\n",
       "      <td>42.731</td>\n",
       "      <td>4797.231267</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>59</td>\n",
       "      <td>Argentina</td>\n",
       "      <td>Americas</td>\n",
       "      <td>40301927.0</td>\n",
       "      <td>75.320</td>\n",
       "      <td>12779.379640</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "   Unnamed: 0      country continent  population  life expectancy  \\\n",
       "0          11  Afghanistan      Asia  31889923.0           43.828   \n",
       "1          23      Albania    Europe   3600523.0           76.423   \n",
       "2          35      Algeria    Africa  33333216.0           72.301   \n",
       "3          47       Angola    Africa  12420476.0           42.731   \n",
       "4          59    Argentina  Americas  40301927.0           75.320   \n",
       "\n",
       "   gdp per capita  \n",
       "0      974.580338  \n",
       "1     5937.029526  \n",
       "2     6223.367465  \n",
       "3     4797.231267  \n",
       "4    12779.379640  "
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df3.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 4.2运行"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe src=\"http://localhost:9999\" width=700 height=350></iframe>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      " * Serving Flask app \"__main__\" (lazy loading)\n",
      " * Environment: production\n",
      "   WARNING: This is a development server. Do not use it in a production deployment.\n",
      "   Use a production WSGI server instead.\n",
      " * Debug mode: off\n"
     ]
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      " * Running on http://127.0.0.1:9999/ (Press CTRL+C to quit)\n",
      "C:\\Users\\20418\\Anaconda3\\envs\\dash\\lib\\site-packages\\dash\\resources.py:44: UserWarning:\n",
      "\n",
      "A local version of https://code.jquery.com/jquery-3.2.1.min.js is not available\n",
      "\n",
      "C:\\Users\\20418\\Anaconda3\\envs\\dash\\lib\\site-packages\\dash\\resources.py:44: UserWarning:\n",
      "\n",
      "A local version of https://cdn.rawgit.com/plotly/dash-app-stylesheets/a3401de132a6d0b652ba11548736b1d1e80aa10d/dash-goldman-sachs-report-js.js is not available\n",
      "\n",
      "C:\\Users\\20418\\Anaconda3\\envs\\dash\\lib\\site-packages\\dash\\resources.py:44: UserWarning:\n",
      "\n",
      "A local version of http://getbootstrap.com/dist/js/bootstrap.min.js is not available\n",
      "\n",
      "C:\\Users\\20418\\Anaconda3\\envs\\dash\\lib\\site-packages\\dash\\resources.py:44: UserWarning:\n",
      "\n",
      "A local version of https://fonts.googleapis.com/css?family=Raleway:400,300,600 is not available\n",
      "\n",
      "C:\\Users\\20418\\Anaconda3\\envs\\dash\\lib\\site-packages\\dash\\resources.py:44: UserWarning:\n",
      "\n",
      "A local version of https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css is not available\n",
      "\n",
      "C:\\Users\\20418\\Anaconda3\\envs\\dash\\lib\\site-packages\\dash\\resources.py:44: UserWarning:\n",
      "\n",
      "A local version of http://getbootstrap.com/dist/css/bootstrap.min.css is not available\n",
      "\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:36] \"\u001b[37mGET / HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:37] \"\u001b[37mGET /_dash-component-suites/dash_renderer/react@16.8.6.min.js?v=1.0.0&m=1562378878 HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:37] \"\u001b[37mGET /_dash-component-suites/dash_renderer/prop-types@15.7.2.min.js?v=1.0.0&m=1562378878 HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:37] \"\u001b[37mGET /_dash-component-suites/dash_core_components/highlight.pack.js?v=1.0.0&m=1562378883 HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:37] \"\u001b[37mGET /_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1562378878 HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:37] \"\u001b[37mGET /_dash-component-suites/dash_html_components/dash_html_components.min.js?v=1.0.0&m=1562378888 HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:37] \"\u001b[37mGET /_dash-component-suites/dash_core_components/plotly-1.48.3.min.js?v=1.0.0&m=1562378883 HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:37] \"\u001b[37mGET /_dash-component-suites/dash_renderer/dash_renderer.min.js?v=1.0.0&m=1562378878 HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:38] \"\u001b[37mGET /_dash-component-suites/dash_core_components/dash_core_components.min.js?v=1.0.0&m=1562378883 HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:38] \"\u001b[37mGET /_dash-layout HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:38] \"\u001b[37mGET /_dash-dependencies HTTP/1.1\u001b[0m\" 200 -\n",
      "127.0.0.1 - - [06/Jul/2019 14:43:39] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n"
     ]
    }
   ],
   "source": [
    "if __name__ == '__main__':\n",
    "#     app.run_server(debug=True)\n",
    "    show_app(app)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
